<template>
    <div class="page">
        
        <img class="logo" src="https://files.onestep6.com/cloud/cloud-logo.png"  />
		<img class="logo-txt" src="https://files.onestep6.com/cloud/logo-txt.png"  />
		<div class="logo-des">在线下单·送货上门</div>

        <div>
            <van-field class="inp" v-model="mobile" type="tel" maxlength="11" placeholder="请输入手机号" />
        </div>
        <div>
            <van-field class="inp" v-if="show_code" v-model="code" type="digit"  maxlength="6" placeholder="请输入验证码" >
                <template #button>
                    <van-button class="inp-btn" size="small" @click="getCode">{{is_code?`${count}s`:`获取验证码`}}</van-button>
                </template>
            </van-field>
        </div>
        <div v-if="!show_code">
            <van-field class="inp" v-model="password" type="password" placeholder="请输入密码" />
        </div>

        <div class="txt-tip" @click="logoChange">{{ show_code? '密码登录': '验证码登录' }}</div>

        <van-button class="login-btn" size="small" @click="onLogin">一键登录</van-button>

        <div class="check">
            <van-checkbox v-model="checked" checked-color="#49CA6F" icon-size="14px">登录即代表同意</van-checkbox>
            <span class="check-link" @click="$router.push({path:'/agreement'})">《用户协议》</span>
            和
            <span class="check-link" @click="$router.push({path:'/privacy'})">《隐私条款》</span>
        </div>
    </div>
</template>
<script>
import { sendCode, passLogin, smsLogin } from "@/api/cloud";
import store from "@/store";
export default {
    data() {
        return {
            mobile: '',
            code: '',
            checked: false,
            is_code: false, // 获取验证码中
            timer: null,
            count: 59,
            show_code: false,
            password: ''
        }
    },
    mounted() {
        
    },
    methods: {
        // 点击登录
        onLogin() {
            if (this.trimAll(this.mobile) == '') {
                this.$toast('请先输入手机号');
                return false;
            }
            if (this.show_code) {
                if (this.trimAll(this.code) == '') {
                    this.$toast('请先输入验证码');
                    return false;
                }
            } else {
                if (this.trimAll(this.password) == '') {
                    this.$toast('请先输入密码');
                    return false;
                }
            }
            if (!this.checked) {
                this.$toast('请先阅读并同意协议');
                return false;
            }
            if (!this.phoneValidator(this.mobile)) {
                this.$toast('请输入正确的手机号');
                return false;
            }
            if( this.show_code ) {
                this.smsLogin()
            } else {
                this.passLogin();
            }
        },
        async smsLogin() {
            const res = await smsLogin({
                code: this.code,
                phone: this.mobile
            })
            if (res.status == 1) {
                console.log(res)
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('is_admin', res.data.is_admin)
                localStorage.setItem('delivery_type', res.data.delivery_type)
                store.commit("SET_OTHER_TOKEN", res.data.token)
                this.$router.replace('/home')
            }
        },
        async passLogin() {
            const res = await passLogin({
                password: this.password,
                phone: this.mobile
            })
            if (res.status == 1) {
                console.log(res)
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('is_admin', res.data.is_admin)
                localStorage.setItem('delivery_type', res.data.delivery_type)
                store.commit("SET_OTHER_TOKEN", res.data.token)
                this.$router.replace('/home')
            }
        },
        // 请求验证码
        async getCode() {
            if (this.is_code) { // 获取验证码中
                return false;
            }
            if (this.phoneValidator(this.mobile)) {
                const res = await sendCode({
                    phone: this.mobile
                })
                if (res.status == 1) {
                    console.log(res);
                    this.is_code = true;
                    this.timer = setInterval(()=>{
                        if (this.count == 1) {
                            clearInterval(this.timer)
                            this.timer = null;
                            // 重置倒计时的数据
                            this.is_code = false;
                            this.count = 59;
                        } else {
                            this.count-= 1;
                        }
                    }, 1000);
                }
            } else {
                this.$toast('请输入正确的手机号');
            }
        },
        phoneValidator(val) {
            return /^1[3456789]\d{9}$/.test(val);
        },
        // 去除空格
        trimAll(ele){
            if(typeof ele === 'string'){
                return ele.split(/[\t\r\f\n\s]*/g).join('');
            }else{
                console.error(`${typeof ele} is not the expected type, but the string type is expected`)
            }
        },
        onClose() {
            this.$router.back()
        },
        logoChange() {
            if(this.show_code) {
                this.show_code = false;
                this.password = '';
            } else {
                this.show_code = true;
                this.code = ''
            }
        }
    },
}
</script>
<style lang="less" scoped>
div{
    box-sizing: border-box;
}
.page{
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #FFFFFF;
    padding-top: calc(128px + 198px);
}
.logo{
	display: block;
	width: 202px;
	height: 164px;
	margin: 0 auto 22px;
}
.logo-txt{
	display: block;
	width: 139px;
	height: 34px;
	margin: 0 auto;
}
.logo-des{
	font-size: 24px;
	line-height: 56px;
	color: #798391;
	font-weight: 400;
	text-align: center;
	margin-bottom: 70px;
}
.inp{
    display: block;
    width: 646px;
    height: 92px;
    // background: rgba(204, 204, 204, 0.26);
    border-radius: 46px;
    // border: 1px solid #FFFFFF;
    background-image: url('https://files.onestep6.com/2024/static/image/qiye-inp.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin:  0 auto 40px;
    backdrop-filter: blur(2px);
    color: #333333;
    font-size: 32px;
    font-weight: bold;
    line-height: 48px;
}
.inp ::v-deep .van-field__control::-webkit-input-placeholder {
    color: #333333;
    font-size: 32px;
    font-weight: bold;
}
.inp-btn{
    background: transparent;
    border: none;
    font-size: 28px;
    color: #333333;
    font-weight: bold;
    height: 48px;
}
.txt-tip{
    width: 646px;
    margin: 0 auto;
    color: #999999;
    font-size: 28px;
    line-height: 32px;
    font-weight: bold;
    margin-bottom: 60px;
}
.login-btn{
    display: block;
    width: 670px;
    height: 96px;
    background: #49CA6F;
    border-radius: 12px;
    margin: 0 auto;
    font-size: 34px;
    color: #FFFFFF;
    font-weight: bold;
}
.check{
    position: absolute;
    left: 100px;
    bottom: 79px;
    display: flex;
    align-items: center;
    padding-left: 32px;
    font-size: 24px;
    line-height: 24px;
    font-weight: 400;
    color: #333333;
    margin-bottom: 26px;
}
.check-link{
    font-size: 24px;
    line-height: 42px;
    font-weight: 400;
    color: #49CA6F;
}
</style>